.bg-white {
    background-color:#fff
}
.bg-black {
    background-color:#000
}
.bg-low {
    background-color:#9c9c9c
}
.bg-basic {
    background-color:#d8dd5a
}
.bg-primary {
    background-color:#4aabea
}
.bg-secondary {
    background-color:#cfc2d1
}
.bg-advanced {
    background-color:#f1c644
}
.bg-accent {
    background-color:#f6540e
}
.bg-blue {
    background-color:#2bf
}
.bg-yellow {
    background-color:#ffd802
}
.bg-dark-blue {
    background-color:#0075a8
}
.bg-light-blue {
    background-color:#3ff7ff
}
.bg-gray {
    background-color:#313131
}
.bg-dark {
    background-color:#222
}
.text-shadow {
    text-shadow:1px 1px 1px rgba(0, 0, 0, .3)
}
.drop-shadow {
    filter:drop-shadow(1px 1px 1px rgba(0, 0, 0, .3))
}
.ak-button {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    outline:0;
    border:none;
    font-size:1rem;
    font-weight:700;
    height:50px;
    width:150px;
    color:#fff;
    background-color:rgba(128, 128, 128, .95);
    box-shadow:inset 0 0 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .5);
    transition:.2s;
    padding:0;
    cursor:pointer
}
.ak-button::after {
    position:absolute;
    visibility:hidden;
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:transparent;
    transition:background-color .2s
}
.ak-button:active {
    box-shadow:inset 0 0 10px rgba(0, 0, 0, .1), 0 6px 12px rgba(0, 0, 0, .5)
}
.ak-button:active::after {
    content:"";
    visibility:visible;
    background-color:rgba(0, 0, 0, .1)
}
.ak-button__icon {
    display:inline-flex;
    width:3rem;
    height:3rem;
    fill:currentColor
}
.ak-button__label {
    display:inline-flex;
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    line-height:1
}
.ak-button--block {
    display:block;
    width:100%
}
.ak-button--block+.ak-button-block {
    margin-top:20px
}
.ak-button--fab {
    display:inline-block;
    width:4rem;
    height:3.5rem;
    background-color:rgba(128, 128, 128, .6);
    box-shadow:0 8px 10px rgba(0, 0, 0, .8);
    padding:0
}
.ak-button--fab:active {
    background-color:rgba(128, 128, 128, .5);
    box-shadow:0 5px 10px rgba(0, 0, 0, .8)
}
.ak-button--fab .ak-button__icon {
    width:2.2rem;
    height:2.2rem
}
.ak-button--outline {
    border:2px solid #fff;
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    box-shadow:0 10px 15px rgba(0, 0, 0, .5)
}
.ak-button--action {
    text-align:right;
    background-color:#2bf;
    box-shadow:2px 5px 50px -10px rgba(0, 0, 0, .5)
}
.ak-button--advanced {
    background-color:rgba(255, 216, 2, .85)
}
.ak-button--light {
    background-color:rgba(238, 238, 238, .85)
}
.ak-button__info {
    height:30px;
    background-color:rgba(0, 0, 0, .6);
    color:#fff;
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    display:flex;
    align-items:center;
    font-size:1.2rem
}
.ak-button__info .ak-icon {
    width:3rem;
    height:3rem;
    filter:drop-shadow(0 10px 15px #000);
    margin-top:-.5rem
}
.ak-button--card {
    position:relative;
    background-color:#eee;
    box-shadow:0 2px 8px rgba(0, 0, 0, .6);
    width:12.5rem;
    height:6rem;
    color:#000;
    margin:.3rem
}
.ak-button--card .ak-icon {
    position:absolute;
    right:.2rem;
    width:5rem;
    height:5rem;
    color:#d3d3d3
}
.ak-button--card .label {
    position:absolute;
    top:10px;
    left:10px;
    font-family:Noto Serif SC, serif;
    font-size:2.8rem;
    font-weight:900
}
.ak-button--card .subtitle {
    color:#999;
    font-size:21px;
    position:absolute;
    left:14px;
    top:58px
}
.ak-button--card.with-line::before {
    position:absolute;
    content:"";
    top:-2px;
    width:10rem;
    height:5px;
    background-color:#f6540e
}
.ak-button--start {
    width:38px;
    height:38px;
    background-color:transparent;
    outline:5px solid #ffd802;
    color:#ffd802;
    font-style:italic;
    font-size:xx-small;
    font-weight:700;
    margin:10px;
    transform:rotate(-45deg);
    text-shadow:0 0 20px rgba(0, 0, 0, .3);
    box-shadow:0 0 20px rgba(0, 0, 0, .3), inset 0 0 50px rgba(0, 0, 0, .3);
    display:inline-block;
    cursor:pointer
}
.ak-button--start .icon {
    color:#ffd802;
    transform:rotate(45deg) translate(22px, -10px)
}
.ak-button--start .label {
    transform:rotate(45deg) translateY(5px);
    text-align:center
}
.ak-button--start::after {
    content:"";
    display:inline-block;
    width:38px;
    height:38px;
    background-color:transparent;
    outline:5px solid var(--ak-loading-color, #ffd802);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    -webkit-animation-name:ak-radio;
    animation-name:ak-radio;
    -webkit-animation-duration:.7s;
    animation-duration:.7s;
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite
}
@-webkit-keyframes ak-radio {
    from {
        width:38px;
        height:38px;
        opacity:1
    }
    to {
        width:90px;
        height:90px;
        opacity:0
    }
}
@keyframes ak-radio {
    from {
        width:38px;
        height:38px;
        opacity:1
    }
    to {
        width:90px;
        height:90px;
        opacity:0
    }
}
.ak-button-group {
    width:300px;
    display:flex
}
.ak-button-group .ak-button {
    color:#000;
    box-shadow:0 2px 10px rgba(0, 0, 0, .1);
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    font-size:x-large
}
.ak-button-group--action {
    background-color:var(--button-group-bgcolor, rgba(5, 166, 220, .9));
    padding:.2rem
}
.ak-button-group--action .ak-icon {
    margin:0 .2rem;
    color:gray
}
.ak-button-group--action .info {
    display:flex;
    background-color:#444;
    color:#fff;
    height:2rem;
    font-size:1.2rem;
    align-items:center
}
.ak-button-group--action .button-group {
    display:flex
}
.ak-button-group--action .button-group .ak-icon {
    position:absolute;
    left:0;
    width:3.5rem;
    height:3.5rem;
    color:rgba(255, 255, 255, .2)
}
.ak-button-group--action .button-group .ak-button {
    display:inline-flex;
    flex-grow:1;
    background-color:transparent;
    box-shadow:inset 0 0 2px rgba(0, 0, 0, .6);
    height:4rem;
    align-items:center
}
.ak-button-group--action .button-group .ak-button__label {
    font-family:Noto Serif SC, serif;
    font-size:1.8rem;
    font-weight:900
}
.ak-button-group--total {
    display:flex
}
.ak-button-group--total .left {
    flex-grow:1
}
.ak-button-group--total .left .ak-button {
    width:100%;
    height:100%;
    background-color:var(--button-group-bgcolor, rgba(5, 166, 220, .9));
    box-shadow:none
}
.ak-button-group--total .left .ak-button .ak-icon {
    position:absolute;
    right:0;
    width:5rem;
    height:5rem;
    color:rgba(255, 255, 255, .2)
}
.ak-button-group--total .left .ak-button__label {
    padding-top:1.8rem;
    font-family:Noto Serif SC, serif;
    font-size:2.5rem;
    font-weight:900
}
.ak-button-group--total .right {
    flex-grow:1.6;
    box-shadow:0 0 4px rgba(0, 0, 0, .3);
    z-index:1
}
.ak-button-group.with-small {
    position:relative;
    background:#444;
    width:17.5rem
}
.ak-button-group.with-small .ak-button--card {
    margin:0
}
.ak-button-group.with-small .ak-button--card .ak-icon {
    width:6rem;
    height:6rem
}
.ak-button-group.with-small .subtitle {
    color:#f6540e;
    position:absolute;
    top:56px;
    left:10px;
    font-size:12px;
    font-weight:700;
    font-family:Syncopate, sans-serif
}
.ak-button-group.with-small .small {
    position:absolute;
    width:4.5rem;
    height:100%;
    right:0;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    padding-top:.8rem
}
.ak-button-group.with-small .small .label {
    font-family:Noto Serif SC, serif;
    color:#fff;
    font-size:2rem;
    font-weight:900
}
.ak-button-group.with-small .small .ak-icon {
    width:3.2rem;
    height:3.2rem;
    color:gray
}
.ak-card {
    background-color:transparent;
    transition:.2s;
    box-shadow:0 0 10px rgba(0, 0, 0, .2);
    outline:0;
    display:inline-block;
    padding:.5rem 1rem
}
.ak-card--outline {
    display:block;
    min-height:100px;
    border:.5rem solid #fff;
    background-color:transparent;
    box-shadow:2px 2px 15px rgba(0, 0, 0, .2)
}
.ak-card--outline>.title {
    font-weight:900;
    font-size:large;
    margin:.2rem 0;
    border-bottom:2px solid #fff
}
.ak-card--outline:hover {
    box-shadow:2px 2px 30px rgba(0, 0, 0, .2)
}
.ak-card--stripe {
    width:200px;
    height:200px;
    padding:0;
    background-image:repeating-linear-gradient(-45deg, transparent, transparent 5px, #fff 10px, #fff 15px)
}
.ak-card--stripe:hover {
    box-shadow:0 0 20px rgba(0, 0, 0, .2)
}
.ak-card--place {
    border:1px solid transparent;
    width:100px;
    height:100px;
    box-shadow:inset 0 0 20px #fff;
    border-bottom:4px solid var(--ak-card-place-color, #fff);
    padding:0
}
.ak-card--place:active, .ak-card--place:focus {
    border-top:1px solid #fff;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    box-shadow:inset 0 0 20px #fff, 0 5px 10px rgba(0, 0, 0, .1);
    transform:translateY(-10px)
}
.ak-counter {
    display:inline-flex;
    align-items:center;
    color:#fff;
    margin:0 .5rem
}
.ak-counter__prefix .ak-icon {
    width:2.8rem;
    height:2.8rem;
    filter:drop-shadow(1px 1px 4px rgba(0, 0, 0, .6))
}
.ak-counter__content {
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    font-size:1.8rem;
    text-shadow:1px 1px 4px rgba(0, 0, 0, .6);
    margin-left:.4rem;
    vertical-align:text-bottom
}
.ak-counter__suffix .ak-icon {
    width:2rem;
    height:2rem;
    filter:drop-shadow(1px 1px 4px rgba(0, 0, 0, .6));
    transition:.2s
}
.ak-counter__suffix .ak-icon:active {
    color:rgba(255, 255, 255, .8)
}
.ak-counter-group {
    background-color:rgba(0, 0, 0, .2);
    display:flex;
    justify-content:center;
    align-items:center;
    height:2rem
}
.ak-divider {
    display:flex;
    align-items:center;
    margin:.5rem 3rem
}
.ak-divider::before {
    content:"";
    height:3px;
    width:15%;
    background-color:rgba(255, 255, 255, .8)
}
.ak-divider span {
    width:35%;
    text-align:center;
    color:rgba(255, 255, 255, .8);
    font-size:1rem;
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    filter:drop-shadow(2px 2px 1px rgba(0, 0, 0, .3))
}
.ak-divider span .ak-icon {
    width:1rem;
    height:1rem
}
.ak-divider::after {
    content:"";
    height:3px;
    width:50%;
    background-color:rgba(255, 255, 255, .8)
}
.ak-input-number {
    position:relative;
    display:inline-block;
    height:40px;
    padding:0
}
.ak-input-number__inner {
    font-family:"Roboto Mono", monospace;
    font-size:1rem;
    text-align:center;
    background-color:#d3d3d3;
    color:#333;
    outline:0;
    padding:0 120px;
    width:150px;
    height:100%;
    border:none
}
.ak-input-number__decrease, .ak-input-number__increase, .ak-input-number__max, .ak-input-number__min {
    position:absolute;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:60px;
    height:100%;
    color:#d3d3d3
}
.ak-input-number__max, .ak-input-number__min {
    background-color:#444;
    font-family:Roboto, sans-serif;
    box-shadow:0 0 2px rgba(0, 0, 0, .3)
}
.ak-input-number__decrease, .ak-input-number__increase {
    background-color:#333
}
.ak-input-number__decrease .ak-icon, .ak-input-number__increase .ak-icon {
    width:1.5rem;
    height:1.5rem
}
.ak-input-number__max {
    right:0
}
.ak-input-number__min {
    left:0
}
.ak-input-number__increase {
    right:60px
}
.ak-input-number__decrease {
    left:60px
}
.ak-fx--glow {
    -webkit-animation-name:ak-glow;
    animation-name:ak-glow;
    -webkit-animation-duration:1.5s;
    animation-duration:1.5s;
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    animation-direction:alternate
}
.ak-fx--outline {
    -webkit-animation-name:ak-outline-fade;
    animation-name:ak-outline-fade;
    -webkit-animation-duration:.7s;
    animation-duration:.7s;
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite
}
.ak-fx--skew-left {
    transform:skewX(-10deg)
}
.ak-fx--skew-right {
    transform:skewX(10deg)
}
@-webkit-keyframes ak-glow {
    from {
        box-shadow:0 0 0 var(--ak-fx-glow-color, rgba(255, 255, 255, .3))
    }
    to {
        box-shadow:0 0 20px var(--ak-fx-glow-color, rgba(255, 255, 255, .3))
    }
}
@keyframes ak-glow {
    from {
        box-shadow:0 0 0 var(--ak-fx-glow-color, rgba(255, 255, 255, .3))
    }
    to {
        box-shadow:0 0 20px var(--ak-fx-glow-color, rgba(255, 255, 255, .3))
    }
}
@-webkit-keyframes ak-outline-fade {
    from {
        outline:.35rem solid var(--ak-outline-color, gray);
        outline-width:.35rem
    }
    to {
        outline:.35rem solid transparent;
        outline-width:.2rem;
        outline-offset:1.5rem
    }
}
@keyframes ak-outline-fade {
    from {
        outline:.35rem solid var(--ak-outline-color, gray);
        outline-width:.35rem
    }
    to {
        outline:.35rem solid transparent;
        outline-width:.2rem;
        outline-offset:1.5rem
    }
}
.ak-icon {
    width:1em;
    height:1em;
    vertical-align:-.15em;
    fill:currentColor;
    overflow:hidden
}
.ak-icon--stuff {
    box-sizing:border-box;
    display:inline-flex;
    border:4px solid var(--icon-border-color, #d8dd5a);
    border-radius:50%;
    padding:.2rem;
    width:5rem;
    height:5rem;
    background-color:#d3d3d3;
    box-shadow:inset 0 0 0 3px #000, 0 0 5px var(--icon-border-color, #d8dd5a);
    justify-content:center;
    align-items:center
}
.ak-icon--stuff .ak-icon {
    width:5rem;
    height:5rem;
    transform:scale(1.2);
    filter:drop-shadow(0 2px 5px rgba(0, 0, 0, .6))
}
.triangle-right {
    width:0;
    height:0;
    border-top:5px solid transparent;
    border-left:10px solid;
    border-bottom:5px solid transparent
}
.ak-level {
    position:relative;
    display:inline-block;
    width:120px;
    text-align:center;
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    box-shadow:0 2px 20px rgba(0, 0, 0, .6)
}
.ak-level .label {
    background-color:var(--level-label-bgcolor, #000);
    width:100%
}
.ak-level .label::before {
    display:block;
    content:var(--level-label-text, "OPERATION");
    color:#fff;
    font-size:small;
    line-height:.6;
    transform:scale(.5)
}
.ak-level .content {
    background-color:#fff;
    color:#000;
    font-size:1.2rem;
    font-weight:500;
    padding:.2rem 0 .3rem 0
}
.ak-level .prefix-icon .ak-icon {
    position:absolute;
    color:var(--level-prefix-icon-color, #2bf);
    left:-1rem;
    top:.2rem;
    width:2rem;
    height:2rem;
    filter:drop-shadow(0 0 5px rgba(0, 0, 0, .3))
}
.ak-level .suffix-icon {
    position:absolute;
    top:-.7rem;
    right:-1.7rem;
    width:3.4rem;
    height:3.4rem
}
.ak-loading {
    width:38px;
    height:38px;
    background-color:transparent;
    border:5px solid var(--ak-loading-color, #fff);
    transform:rotate(-45deg);
    display:inline-block;
    margin:66px
}
.ak-loading::after {
    content:"";
    display:inline-block;
    width:38px;
    height:38px;
    background-color:transparent;
    border:5px solid var(--ak-loading-color, #fff);
    position:relative;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    -webkit-animation-name:ak-radio;
    animation-name:ak-radio;
    -webkit-animation-duration:.7s;
    animation-duration:.7s;
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite
}
.ak-media--album {
    position:relative;
    display:inline-block;
    border:.5rem solid #fff;
    box-shadow:0 8px 10px rgba(0, 0, 0, .5);
    padding:0;
    margin:10px;
    transform-style:preserve-3d;
    transform:rotate(2deg);
    max-width:100%;
    max-height:100%
}
.ak-media--album img {
    vertical-align:bottom
}
.ak-media--album::before {
    content:"";
    position:absolute;
    top:5px;
    left:-10px;
    width:100%;
    height:var(--ak-media-album-heiht, 98%);
    border:.4rem solid #fff;
    background-color:var(--ak-media-album-bgcolor, #333);
    box-shadow:0 5px 10px rgba(0, 0, 0, .5);
    transform:rotate(-5deg) translateZ(-1px)
}
.ak-cube {
    display:inline-block;
    width:var(--cube-size, 100px);
    height:var(--cube-size, 100px);
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
    transform-style:preserve-3d
}
.ak-face {
    display:block;
    position:absolute;
    width:var(--cube-size, 100px);
    height:var(--cube-size, 100px);
    line-height:2;
    font-family:sans-serif;
    font-size:calc(var(--cube-size, 100px)/ 2);
    text-align:center;
    color:var(--cube-color, rgba(34, 187, 255, .5));
    background-color:transparent;
    border:var(--cube-border-width, .2rem) solid var(--cube-color, rgba(34, 187, 255, .5));
    border-radius:.2rem
}
.ak-face.front {
    transform:translateZ(calc(var(--cube-size, 100px)/ 2))
}
.ak-face.back {
    transform:rotateY(180deg) translateZ(calc(var(--cube-size, 100px)/ 2))
}
.ak-face.right {
    transform:rotateY(90deg) translateZ(calc(var(--cube-size, 100px)/ 2))
}
.ak-face.left {
    transform:rotateY(-90deg) translateZ(calc(var(--cube-size, 100px)/ 2))
}
.ak-face.top {
    transform:rotateX(90deg) translateZ(calc(var(--cube-size, 100px)/ 2))
}
.ak-face.bottom {
    transform:rotateX(-90deg) translateZ(calc(var(--cube-size, 100px)/ 2))
}
.ak-face__lines {
    position:absolute;
    top:0;
    left:0;
    width:var(--cube-size, 100px);
    height:var(--cube-size, 100px);
    box-sizing:content-box
}
.ak-face__line--bl, .ak-face__line--br, .ak-face__line--tl, .ak-face__line--tr {
    position:absolute;
    left:.2rem;
    top:.2rem;
    right:.2rem;
    bottom:.2rem;
    display:inline-block
}
.ak-face__line--bl::before, .ak-face__line--br::before, .ak-face__line--tl::before, .ak-face__line--tr::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    width:calc(var(--cube-size, 100px)/ 4);
    height:calc(var(--cube-border-width, .2rem)/ 2);
    background-color:currentColor;
    transform:rotate(45deg);
    transform-origin:top left
}
.ak-face__line--br {
    transform:rotate(90deg)
}
.ak-face__line--tr {
    transform:rotate(180deg)
}
.ak-face__line--bl {
    transform:rotate(270deg)
}
.perspective {
    display:block;
    perspective:100rem;
    perspective-origin:50% 125%
}
.ak-panel-right {
    padding:2rem;
    min-height:30rem;
    text-align:center;
    transform:perspective(50rem) rotateY(-10deg);
    transform-origin:center right
}
.ak-pagination {
    display:inline-flex;
    height:5rem;
    width:16rem;
    background-color:#999;
    color:#fff
}
.ak-pagination .next, .ak-pagination .prev {
    position:relative;
    background-color:#333;
    height:100%;
    width:4rem;
    box-sizing:border-box;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    box-shadow:0 5px 10px rgba(0, 0, 0, .6);
    cursor:pointer
}
.ak-pagination .next .ak-icon, .ak-pagination .prev .ak-icon {
    width:2rem;
    height:2rem
}
.ak-pagination .next::after, .ak-pagination .prev::after {
    position:absolute;
    visibility:hidden;
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:transparent;
    transition:background-color .2s
}
.ak-pagination .next:active, .ak-pagination .prev:active {
    box-shadow:inset 0 0 10px rgba(0, 0, 0, .1), 0 6px 12px rgba(0, 0, 0, .5)
}
.ak-pagination .next:active::after, .ak-pagination .prev:active::after {
    content:"";
    visibility:visible;
    background-color:rgba(0, 0, 0, .1)
}
.ak-pagination .cur {
    display:inline-flex;
    border:2px solid gray;
    border-width:2px 0;
    width:8rem;
    flex-direction:column;
    align-items:center
}
.ak-pagination .cur .title {
    font-weight:400;
    border:none;
    margin-top:9px
}
.ak-pagination .label {
    font-size:12px
}
.ak-pagination .number {
    font-size:1.9rem
}
.ak-san {
    position:relative;
    width:11rem
}
.ak-san .brain {
    position:absolute;
    left:.5rem;
    top:0;
    z-index:0
}
.ak-san .brain .ak-icon {
    color:rgba(255, 255, 255, .9);
    width:7rem;
    height:7rem;
    filter:drop-shadow(0 0 2px gray)
}
.ak-san .add {
    position:absolute;
    left:-1rem;
    top:2rem;
    border-radius:50%;
    width:2rem;
    height:2rem;
    background-color:rgba(0, 0, 0, .7);
    box-shadow:5px 3px 0 rgba(0, 0, 0, .4);
    cursor:pointer;
    z-index:1
}
.ak-san .add .ak-icon {
    color:#fff;
    width:2rem;
    height:2rem
}
.ak-san .add::after {
    position:absolute;
    visibility:hidden;
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:transparent;
    transition:background-color .2s
}
.ak-san .add:active {
    box-shadow:inset 0 0 10px rgba(0, 0, 0, .1), 0 6px 12px rgba(0, 0, 0, .5)
}
.ak-san .add:active::after {
    content:"";
    visibility:visible;
    background-color:rgba(0, 0, 0, .1)
}
.ak-san .add::after {
    border-radius:50%
}
.ak-san .cur {
    background-color:rgba(128, 128, 128, .4);
    text-align:right;
    font-size:5rem;
    text-shadow:4px 4px 0 gray;
    padding:0 1rem .8rem 0;
    margin-bottom:.4rem;
    border-radius:.1rem
}
.ak-san .cur .value {
    transform:translateZ(1px)
}
.ak-san .total {
    background-color:#333;
    text-align:right;
    color:#fff;
    font-size:1.6rem;
    padding:.3rem .9rem .5rem 0;
    border-radius:.2rem
}
.ak-san-container {
    display:flex;
    position:relative;
    background:rgba(255, 255, 255, .8);
    padding:1.5rem 2rem 1.2rem 2rem
}
.ak-san-container::after {
    position:absolute;
    visibility:hidden;
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:transparent;
    transition:background-color .2s
}
.ak-san-container:active {
    box-shadow:inset 0 0 10px rgba(0, 0, 0, .1), 0 6px 12px rgba(0, 0, 0, .5)
}
.ak-san-container:active::after {
    content:"";
    visibility:visible;
    background-color:rgba(0, 0, 0, .1)
}
.ak-san-container::before {
    position:absolute;
    content:"";
    left:15rem;
    bottom:-2px;
    width:18rem;
    height:5px;
    background-color:#f6540e
}
.ak-san-container .info {
    margin-left:1rem
}
.ak-san-container .info .title {
    color:#000;
    font-size:4rem;
    font-weight:900;
    font-family:Noto Serif SC, serif
}
.ak-san-container .info .cur {
    display:inline-block;
    color:#fff;
    background-color:#444;
    border-radius:5px;
    padding:.3rem .4rem;
    font-size:large;
    margin:1rem 0 .4rem 0
}
.ak-san-container .info .status {
    font-family:Noto Sans SC, Roboto, Arial, sans-serif;
    font-size:1.3rem
}
.ak-san-container .info .ak-icon {
    position:absolute;
    color:rgba(128, 128, 128, .3);
    width:11.5rem;
    height:11.5rem;
    top:0;
    left:19rem;
    filter:drop-shadow(1rem 0 1px rgba(128, 128, 128, .3))
}
:root {
    --ak-color-white:white;
    --ak-color-black:black;
    --ak-color-low:#9c9c9c;
    --ak-color-basic:#d8dd5a;
    --ak-color-primary:#4aabea;
    --ak-color-secondary:#cfc2d1;
    --ak-color-advanced:#f1c644;
    --ak-color-accent:#f6540e;
    --ak-color-blue:#2bf;
    --ak-color-yellow:#ffd802;
    --ak-color-dark-blue:#0075a8;
    --ak-color-light-blue:#3ff7ff;
    --ak-color-gray:#313131;
    --ak-color-dark:#222
}
.ak-font-serif {
    font-family:Noto Serif SC, serif
}
.ak-font-sans-serif {
    font-family:Noto Sans SC, Roboto, Arial, sans-serif
}
.ak-text--title {
    font-weight:900;
    font-size:3rem
}
